body{
    background-color: #18222d;
}

.flipped-gif{
    transform: scaleX(-1);
}

.container {
    color: white;
    display: flex;
    width: 100%;
    padding: 4% 2%;
    box-sizing: border-box;
    height: 100vh;
  }

  @media only screen and (max-width: 1170px) and (max-height: 2532px){
    .container{
      padding: 8%;
    }
  }
  
  .box {
    flex: 1;
    overflow: hidden;
    transition: .5s;
    margin: 0 2%;
    box-shadow: 0 20px 30px rgba(0,0,0,.1);
    line-height: 0;
  }
  
  .box > img {
    width: 200%;
    height: calc(100% - 10vh);
    object-fit: cover; 
    transition: .5s;
  }

  .box > a video{
    width: 140%;
    height: calc(100% - 10vh);
    object-fit: cover; 
    transition: .5s;
  }
  
  .box > span {
    font-size: 3.8vh;
    display: block;
    text-align: center;
    height: 10vh;
    line-height: 2.6;
  }

  @media only screen and (max-width: 1170px) and (max-height: 2532px){
    .box > span{
      font-size: 2vh;
    }
  }
  
  .box:hover { flex: 1 1 50%; }
  .box:hover > img {
    width: 100%;
    height: 100%;
  }

  .box:hover { flex: 1 1 50%; }
  .box:hover > video {
    width: 100%;
    height: 100%;
  }